

  <template>
  <div class="bf-commont-template">
    <!-- <div style="padding: 0 16px ;">
      <h3>预约来访列表</h3>
      <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
      <p>生成代码对应的 vue 文件路径：D:\Zmyitem\vue-element-admin\src\beneform4j\view\xz\visit\preinsert\index.vue</p>
      <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
    </div> -->

    <div class="clearfix bf-top-button">
      <div class="float-l">
        <el-button @click="showAdd" type="primary">来访预约</el-button>
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input
            placeholder="请输入来访者姓名搜索"
            prefix-icon="el-icon-search"
            v-model="searchData"
            @keyup.enter.native="quickSearch"
          ></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <bf-table
      :data="listData"
      :setting="setting"
      :rowAction="rowAction"
      @pageChange = "pageChange"
      :editRules = "editRules"
      ref="table"
    ></bf-table>

    <bf-table-detail :width="600" :title="'详情展示'" :editForm='setting' ref='detailRef' >
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>来访人员</div>
          <div ></div>
        </div>
        <bf-table
        :data="otherData"
        :setting="otherSetting"
        :hiddenPagination = "true"
        ref="table"
        ></bf-table>
      </template>
    </bf-table-detail>
    <bf-table-edit :width="600" :title="'编辑'" :editForm='setting' ref='editRef' @formSubmit='editSubmit' :editRules="editRules">
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>来访人员</div>
          <div @click="addOtherItem">新增</div>
        </div>
        <bf-table
        :data="otherData"
        :setting="otherSetting"
        :rowAction="otherRowAction"
        :hiddenPagination = "true"
        ref="table"
        ></bf-table>
      </template>
    </bf-table-edit>
    <!-- 新增 -->
    <bf-table-edit :width="600" :title="'新增预约来访'" :editForm='setting' ref='addRef' @formSubmit='addSubmit' :editRules="editRules">
        <template slot="table">
          <div class="bf-table-title clearfix">
            <div>来访人员</div>
            <div @click="addOtherItem">新增</div>
          </div>
          <bf-table
          :data="otherData"
          :setting="otherSetting"
          :rowAction="otherRowAction"
          :hiddenPagination = "true"
          ref="table"
          ></bf-table>
        </template>
    </bf-table-edit>
    <!-- 高级搜索 -->
    <bf-table-search :title="'搜索'" ref="searchRef" :editForm="searchSetting" @formSubmit='searchSubmit'></bf-table-search>

    <!-- 新增来访人员 -->
    <bf-table-edit :right="600" :title="'新增来访人员'" :editForm='otherSetting' ref='visitPeopleRef' @formSubmit='visitPeopleSubmit' :editRules="otherEditRules"></bf-table-edit>
    <!-- 编辑来访人员 -->
    <bf-table-edit :right="600" :title="'编辑来访人员'" :editForm='otherSetting' ref='editVisitPeopleRef' @formSubmit='editVisitPeopleSubmit' :editRules="otherEditRules"></bf-table-edit>

  </div>
</template>

<script>
import request from '@/utils/request'
import { setting, visitPeopleSetting, addRules, searchSetting } from './setting'
import { getListApi, getItemDetailApi, editItemApi, deleteItemApi, addItemApi } from './api'
export default {
  data() {
    return {
      otherData: [],
      searchData: '',
      otherSetting: visitPeopleSetting,
      searchSetting: searchSetting,
      otherEditRules: addRules,
      listData: {
      },
      otherRowAction: [
        {
          label: '编辑',
          click: (item) => {
            this.$refs.editVisitPeopleRef.show(item.scope.row)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$confirm('删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let id = item.scope.row.dateId
              if (!id) {
                id = item.scope.row.id
                this.otherData.forEach((v,i) => {
                  if (v.id == id) {
                    this.otherData.splice(i,1)
                  }
                })
              } else {
                this.otherData.forEach((v,i) => {
                  if (v.dateId == id) {
                    this.otherData.splice(i,1)
                  }
                })
              }

              this.$message({
                type: 'success',
                message: '删除成功'
              })
            })
          }
        }
      ],
      rowAction: [
        {
          label: '详情',
          click: (item) => {
            let row = item.scope.row
            getItemDetailApi(row.regId).then(response => {
              if (response.success) {
                let data = response.data
                data.visitTime = [data.visitTime1, data.visitTime2]
                this.otherData = data.regDetailBeanList
                this.$refs.detailRef.show(data)
              }
            })
          }
        },
        {
          label: '编辑',
          hiddenStatus: (row) => {
            if (row.visitedFlag == '1') {
              return false
            } else {
              return true
            }
          },
          click: (item) => {
            let row = item.scope.row
            getItemDetailApi(row.regId).then(response => {
              if (response.success) {
                let data = response.data
                data.visitTime = [data.visitTime1, data.visitTime2]
                this.otherData = data.regDetailBeanList
                this.$refs.editRef.show(data)
              }
            })
          }
        },
        {
          label: '删除',
          hiddenStatus: (row) => {
            if (row.visitedFlag == '1') {
              return false
            } else {
              return true
            }
          },
          click: (item) => {
            this.$confirm('删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let id = item.scope.row.regId
              deleteItemApi(id).then(response => {
                if (response.success) {
                  this.$message({
                    type: 'success',
                    message: '删除成功'
                  })
                  this.searchList()
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              })
            })
          }
        }
      ],
      setting: setting,
      editRules: {
        id: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitType: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitTime: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitTime2: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitSite: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitedEmployee: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitedEmployeeOrg: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitedFlag: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      searchParams: { // 获取 list 搜索条件，分页
        page: 1
      }
    }
  },
  mounted: function() {
    this.searchList()
  },
  methods: {
    searchList() {
      let params = this.searchParams
      getListApi(params).then(response => {
        if (response.success) {
          this.listData =response
        }
      })
    },
    addOtherItem() {

      this.$refs.visitPeopleRef.show({})
    },
    visitPeopleSubmit(form) {
      let dateId = new Date().getTime()
      form.dateId = dateId
      this.otherData.push(form)
      this.$refs.visitPeopleRef.hidden()
    },
    editVisitPeopleSubmit(form) {
      if (form.id) {
        this.otherData.forEach((v,i) => {
          if (v.id == form.id) {
            this.otherData.splice(i,1,form)
          }
        })
      } else {
        this.otherData.forEach((v,i) => {
          if (v.dateId == form.dateId) {
            this.otherData.splice(i,1,form)
          }
        })
      }
      this.$refs.editVisitPeopleRef.hidden()
    },
    showSearch() { // 展示高级搜索form
      this.$refs.searchRef.show()
    },
    searchSubmit(form) {  // 高级搜索提交
      this.searchParams.page = 1
      this.searchParams.visitDate = form.visitDate
      this.searchParams.visitedEmployee = form.visitedEmployee
      this.searchParams.visitorName = form.visitorName
      this.searchList()
      this.$refs.searchRef.hiden()
    },
    showAdd() { // 展示新增form
      this.otherData = []

      this.$refs.addRef.show({visitedEmployeeOrg: ''})
    },
    addSubmit(form) { // 新增提交
      if (this.otherData.length == 0) {
        this.$message({
          message: '请添加来访人员名单',
          type: 'error'
        })
        return
      }
      form.visitTime1 = form.visitTime[0]
      form.visitTime2 = form.visitTime[1]
      delete form.visitTime
      form.regDetailBeanList = this.otherData
      addItemApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })

          this.$refs.addRef.hidden()
          this.searchList()
        }
      })
    },
    editSubmit(form) { // 编辑提交
      form.visitTime1 = form.visitTime[0]
      form.visitTime2 = form.visitTime[1]
      delete form.visitTime
      form.regDetailBeanList = this.otherData
      editItemApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })

          this.$refs.editRef.hidden()
          this.searchList()
        }
      })
    },
    quickSearch() { // 快捷搜索
      this.searchParams.page = 1
      this.searchParams.visitorName = this.searchData
      this.searchList()
    },
    pageChange(pageObj) { // 分页处理
      this.searchParams.page = pageObj.page
      this.searchParams.pageSize = pageObj.pageSize
      this.searchList()
    },
  }
}
</script>

<style scoped>

</style>
